<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{border: 1px solid #123112;width: 300px;}
        #a{vertical-align: middle}

    </style>
</head>
<body>
    <p>this is 中文<img id="a" src="../../img/head/head100.jpg">后面,sdf sd sdf s aa f sdf sf  s fafasf  asf </p>
    <p>this is 中文<img id="b" src="../../img/head/head100.jpg">后面,sdf sd sdf s aa f sdf sf  s fafasf  asf</p>
    <div style="font-size: 14px;line-height: 18px;width: 300px;">
        I felt that,if nothing else,I
        <span style="vertical-align: 50%;">deserved a raise</span> for  my efforts.
        <span style="vertical-align: -50%">this is my words</span>.new line about
        vertical align.new line about vertical align.new line about vertical align.
        可以看到，50%改变元素的基线是基于父元素的。
    </div>
</body>
</html>